

<template>

     <nav v-if="route.meta.showNav">
        <RouterLink to="/">Home</RouterLink>
		 <RouterLink to="/search">搜索</RouterLink>
        <RouterLink to="/about">About</RouterLink>
		<router-link to="/goods">商品</router-link>
		<router-link to="/user/222">user222</router-link>
		<router-link to="/user/333">user333</router-link>
		<button @click="router.push('/user/555')">user555</button>
		<button @click="router.replace('/user/666')">user666</button>
		<button @click="fn">user7777</button>
		<button @click="router.push({name:'user',params:{id:'999'}})">user999</button>
		<router-link to="/car?a=199&b=hello">购物车</router-link>
		<router-link to="/car?a=6666&b=hi">购物车</router-link>
		<router-link to="/car#page">购物车</router-link>
		
      </nav>
 <el-button type="primary">Primary</el-button>
	<RouterView />
	<!-- <RouterView name="ce"/>
	<RouterView  name='ri'/>
  -->
</template>
<script setup>
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

let router=useRouter();
let route=useRoute()
const fn=()=>{
	router.push('/user/777')
}

</script>
<style scoped>
	nav{
		display: flex;
	}
	nav a{
		color: #333;
		margin: 0 10px;
	}
	nav a.router-link-active.router-link-exact-active{
		color: red;
	}
</style>
